<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      title="出租屋"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">房屋信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">房屋地址</div>
              <div class="value common-value">{{ isTsyfwinfo.infoNames || '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">房屋负责人</div>
              <div class="value common-value">{{ policeHouseMainsList.userName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">联系方式</div>
              <div class="value common-value">
                {{ policeHouseMainsList.phone || '暂无' }}
              </div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">现居人员</div>
        </div>
        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :dataSource="housePopulationlist"
          :pagination="false"
          style="margin: 20px 0; border: 1px solid #154b81"
        >
          <template slot="action" slot-scope="records">
            <span class="operation deatil-color" @click="handlePopulationDetail(records)">详情</span>
          </template>
        </a-table>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">租房信息</div>
        </div>
        <a-table
          rowKey="id"
          class="tableList"
          :columns="rentHouseInfoColumns"
          :dataSource="listRecontract"
          :pagination="false"
          style="margin: 20px 0; border: 1px solid #154b81"
        >
          <template slot="action" slot-scope="records">
            <span class="operation deatil-color" @click="handleHistoryDetail(records, 'info')">详情</span>
          </template>
        </a-table>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">历史租房信息</div>
        </div>
        <a-table
          rowKey="id"
          class="tableList"
          :columns="historyRentHouseInfoColumns"
          :dataSource="listHistoricalContract"
          :pagination="false"
          style="margin: 20px 0; border: 1px solid #154b81"
        >
          <template slot="action" slot-scope="records">
            <span class="operation deatil-color" @click="handleHistoryDetail(records, 'history')">详情</span>
          </template>
        </a-table>
      </div>
      <div slot="footer"></div>
    </public-modal>
    <HistoryDetail ref="historyDetailRef" :type="titleType" />
    <PopulationDetail ref="populationDetailRef" />
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import publicModal from '@/components/publicModal'
import { JeecgListMixinNew } from '@/mixins/JeecgListMixinNew'
import { houseDetails } from '@/api/api'
import { rentingHouseDetails, webpopulationDetails } from '../../../../api/api'
import HistoryDetail from './historyDetail.vue'
import PopulationDetail from '../../actuallyPopulation/modules/populationDetail.vue'
import moment from 'moment'

export default {
  name: 'actuallyDetail',
  components: { publicModal, startEndTime, HistoryDetail, PopulationDetail },
  mixins: [JeecgListMixinNew],
  data() {
    return {
      url: {
        list: '/common/project_company_serve_record/page',
      },
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '人员姓名',
          align: 'center',
          dataIndex: 'fXm',
          ellipsis: true,
        },
        {
          title: '与房主关系',
          align: 'center',
          dataIndex: 'fTgryfzgx',
          ellipsis: true,
        },
        {
          title: '联系方式',
          align: 'center',
          dataIndex: 'fLxdh',
          ellipsis: true,
        },
        {
          title: '身份证号',
          align: 'center',
          dataIndex: 'fGmsfhm',
          width: 200,
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 100,
        },
      ],
      rentHouseInfoColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '出租人',
          align: 'center',
          dataIndex: 'hostName',
          ellipsis: true,
        },
        {
          title: '承租人',
          align: 'center',
          dataIndex: 'name',
          ellipsis: true,
          customRender: function (t, r, index) {
            return t.join('、')
          },
        },
        {
          title: '租房时间',
          align: 'center',
          dataIndex: 'beginTime',
          customRender: function (t, r, index) {
            return moment(t).format('YYYY/MM/DD')
          },
          ellipsis: true,
        },
        {
          title: '到期时间',
          align: 'center',
          dataIndex: 'endTime',
          width: 200,
          ellipsis: true,
          customRender: function (t, r, index) {
            return moment(r.beginTime).add(r.leaseTerm, 'months').format('YYYY/MM/DD')
          },
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 100,
        },
      ],
      historyRentHouseInfoColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '出租人',
          align: 'center',
          dataIndex: 'hostName',
          ellipsis: true,
        },
        {
          title: '承租人',
          align: 'center',
          dataIndex: 'name',
          ellipsis: true,
          customRender: function (t, r, index) {
            return t.join('、')
          },
        },
        {
          title: '到期时间',
          align: 'center',
          dataIndex: 'endTime',
          ellipsis: true,
          customRender: function (t, r, index) {
            return moment(r.beginTime).add(r.leaseTerm, 'months').format('YYYY/MM/DD')
          },
        },
        {
          title: '退租时间',
          align: 'center',
          dataIndex: 'updateTime',
          width: 200,
          ellipsis: true,
          customRender: function (t, r, index) {
            return moment(t).format('YYYY/MM/DD')
          },
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 100,
        },
      ],
      project_company_type: [],
      queryParams: { pageSize: 5 },
      ipagination: { pageSize: 5 },
      disableMixinCreated: true,
      isTsyfwinfo: {},
      policeHouseMainsList: {},
      housePopulationlist: [],
      listRecontract: [],
      listHistoricalContract: [],
      historyDetailRef: null,
      titleType: '',
    }
  },

  methods: {
    handlePopulationDetail(records) {
      this.$refs.populationDetailRef.show({
        ...records,
        id: records.fId,
      })
    },
    async show(records) {
      this.publicVisible = true
      this.getDetail(records)
    },
    getDetail(records) {
      const params = {
        id: records.fHouseid,
      }
      rentingHouseDetails(params).then((res) => {
        if (res.code == 200) {
          const { isTsyfwinfo, listHistoricalContract, policeHouseMainsList, housePopulationlist, listRecontract } =
            res.result
          this.isTsyfwinfo = isTsyfwinfo
          this.listHistoricalContract = listHistoricalContract
          this.policeHouseMainsList = policeHouseMainsList
          this.housePopulationlist = housePopulationlist
          this.listRecontract = listRecontract
        } else {
        }
      })
    },
    handleOk() {
      this.publicVisible = false
    },
    cancel(target) {
      this.publicVisible = false
    },
    handleHistoryDetail(records, type) {
      this.titleType = type
      this.$refs.historyDetailRef.show(records)
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}
</style>
